<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>
          <i class="el-icon-s-promotion"></i>
          发表评论
        </h2>
        <!-- 请补充服务器地址 -->
        <el-form
          ref="commontForm"
          :model="commontForm"
          :rules="commontFormrules"
          label-width="80px"
        >
          <el-form-item prop="email">
            <el-input
              v-model="commontForm.email"
              placeholder="请输入您的邮箱！"
            ></el-input>
          </el-form-item>
          <el-form-item prop="commont">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请留下精彩的评论！"
              v-model="commontForm.commont"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="float: right; padding: 3px 0"
              type="submit"
              @click="submitCommon('commontForm')"
              >发布评论</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
  <!-- :class="classBtn" -->
  <!-- :class="classHeader" -->
</template>

<script>
import CommitVue from "./Commit.vue";
export default {
  name: "Release",
  data() {
    return {
      commontForm: {
        email: "",
        commont: "",
        blogid: "",
      },
      commontFormrules: {
        email: [
          { required: true, message: "请输入您的邮箱！", trigger: "blur" },
        ],
        commont: [
          { required: true, message: "请输入您的评论！", trigger: "blur" },
          { min: 3, message: "至少3个字符", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    CommitVue.initCommit();
  },
  methods: {
    submitCommon(commontForm) {
      const blogId = this.$route.params.blogId;
      this.commontForm.blogid = blogId;
      this.$refs.commontForm.validate((valid) => {
        if (valid) {
          console.log(this.commontForm);
          this.$axios.post("/commont/", this.commontForm).then((res) => {
            if (res) {
              this.$message.success("评论成功！");
              this.$refs.CommitVue.initCommit();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.textarea {
  margin-bottom: 10px;
}
.btn {
  width: 100px;
  height: 30px;
  background-color: rgb(247, 240, 240);
  margin: 10px;
}
.header {
  padding-bottom: 20px;
}
</style>
